
<template>
  <div class="wrapper">
    <!-- 搜索栏 -->
    <div class="title">
      <p style="font-size: 1.2em; line-height: 100%; margin: 0; text-align: center;">特勤处一览</p>
      <br>
      <el-form :inline="true" :model="searchName" class="form" style="margin: -14px 0px 0px 0px;">
        <el-form-item label="特勤处名称">
          <el-input v-model="searchName.name" placeholder="请输入特勤处名称" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="search">查询</el-button>
        </el-form-item>
      </el-form>
    </div>

    <!-- 折叠面板 -->
    <el-collapse v-model:activeNames="activeNames" accordion class="eco">
      <!-- 循环生成折叠项（每个地图对应一个折叠项） -->
      <el-collapse-item
        v-for="(mapName, index) in tqcList"
        :key="index"
        :name="mapName"
      >
        <!-- 折叠项标题 -->
        <template #title>
          <span>{{ mapName }} ({{ tqcMap[mapName]?.length || 0 }}条数据)</span>
        </template>

        <!-- 折叠内容：表格 -->
        <el-table
          :data="tqcMap[mapName] || []"
          style="width: 100%; margin-top: 10px;"
        >
          <el-table-column fixed prop="cardImage" label="房卡图片" width="100">
            <template #default="scope">
              <img :src="scope.row.cardImage" width="50" v-if="scope.row.cardImage" />
              <span v-else>无图片</span>
            </template>
          </el-table-column>

          <el-table-column prop="productionLocation" label="特勤处名字" width="85" />
          <el-table-column prop="level" label="等级" width="120" />
          <el-table-column prop="upgradePrerequisites" label="升级前提" width="120" />
          <el-table-column prop="requiredHafuCoins" label="花费哈夫币" width="90" />
          <el-table-column prop="totalMaterialValue" label="总材料价格" width="120" />
          <el-table-column prop="totalUpgradeCost" label="总升级花费" width="120" />
          <el-table-column prop="tqcMaterialsNeeds" label="所需材料" width="auto">
            <template #default="scope">
              <el-table :data="scope.row.tqcMaterialsNeeds" style="width: 100%;">
                <el-table-column prop="materialName" label="物资名" width="80">
                </el-table-column>
                <el-table-column prop="amount" label="所需数量" width="auto" />
              </el-table>
            </template>
          </el-table-column>
        </el-table>
      </el-collapse-item>
    </el-collapse>
  </div>
</template>


<script setup lang="ts">
import { onMounted, ref } from "vue";
import type { TqcModel } from "@/api/model/model"; // 假设实际数据项类型为 RoomCardModel
import { queryTqcPageApi } from "@/api/tqc";

// 定义后端返回的 data 类型：地图名称 -> 房间列表的映射
export type TqcModelResult = Record<string, TqcModel[]>;

// 定义统一的 API 响应类型（若有多个接口，可抽离到公共类型文件）
interface ApiResponse<T> {
  code: number;
  message: string;
  data: T;
}


// 定义地图列表（需与后端返回的键名完全一致）
const tqcList = ref<string[]>(["制药台", "工作台", "指挥中心", "靶场", "技术中心", "仓库", "训练中心"]);

const activeNames = ref<string[]>(tqcList.value); // 初始展开所有项

// 使用正确的类型声明 tqcMap
const tqcMap = ref<TqcModelResult>({}); // 初始值为对象，避免 undefined 报错

type SearchEmpModel = {
  name: string;
};

const searchName = ref<SearchEmpModel>({ name: "" });

const search = async () => {
  // 显式指定 result 的类型为 ApiResponse<TqcModelResult>
  const result: ApiResponse<TqcModelResult> = await queryTqcPageApi();
  
  if (result.code === 200) {
    // 直接赋值，类型匹配
    tqcMap.value = result.data;
    console.log("数据赋值成功:", tqcMap.value);
  } else {
    console.error("请求失败:", result.message);
  }
};

onMounted(() => {
  search();
});




</script>

<style scoped>
body {
  background-color: #bfa;
}
/* 使用深度选择器修改表格字体大小 */

:deep(.el-table) {
  font-size: 12px;
}
</style>